<%@ page import="dao.Course" %>
<%@ page import="java.util.List" %>
<%@ page import="service.CourseService" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String wd=request.getParameter("wd");
    List<Course> courses = CourseService.searchCoursesByName(wd);
    String id=null;
    try {
        id=request.getSession().getAttribute("username").toString();
    }catch (Exception e){
        e.printStackTrace();
    }
%>


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程搜索结果</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/search-result.css">
</head>
<body>
    <!--头部-->
    <header class="top">
        <div class="w">
            <div class="top-left">
                <img src="images/Q-logo.png">
            </div>
            <div class="top-center">
                <input placeholder="搜索你感兴趣的课程" id="wd">
                <script>
                    function search() {
                        var wd=document.getElementById('wd');
                        window.location.href="search-result.jsp?wd="+wd.value;
                    }
                </script>
                <button class="iconfont" onclick="search()">&#xe63c;</button>
            </div>
            <div class="top-right">
                <ul>
                    <a href="index.jsp"><li class="current">首页</li></a>
                    <a href="login.jsp"><li>登录注册</li></a>
                    <script>
                        function haveSid() {
                            var sid=<%=id%>
                            if(sid==null){
                                alert("请登录！");
                                return false;
                            }
                        }
                    </script>
                    <a href="self.jsp" onclick="return haveSid()"><li>个人主页</li></a>
                </ul>
            </div>
        </div>
    </header>

    <div class="top-banner" style="background-image: url(images/bg2.jpg); background-size: cover;">
        <div class="w">
            <div class="text">
                <h2>学习这件事不在乎有没有人教你，最重要的是在于你自己有没有觉悟和恒心。——法布尔</h2>
            </div>
        </div>
    </div>

    <!--中部-->
    <div class="main">
        <div class="main-top-bar">
            <div class="w">
                <a href="index.jsp">首页&nbsp>&nbsp</a>
                <a href="#" class="current">搜索结果</a>
            </div>
        </div>
        <div class="main-text">
            <div class="w2">
                <span class="g-text">共有</span>
                <span class="b-text"><%=courses.size()%></span>
                <span class="g-text">门包含</span>
                <span class="b-text">"<%=wd%>"</span>
                <span class="g-text">的课程</span>
            </div>
        </div>
        <div class="main-content">
            <div class="w2">
                    <div class="result">
                    <%
                        for(int i=0;i<(courses.size()+4)/5;i++){
                    %>
                            <ul>
                            <%
                                for(int j=i*5;j<courses.size()&&j<i*5+5;++j){
                                    Course course=courses.get(j);
                            %>
                                    <li>
                                        <a href="course.jsp?cid=<%=course.cid%>&courseName=<%=course.cname%>&imagePath=<%=course.imagePath%>">
                                            <img alt="" src="<%=course.imagePath%>" />
                                        </a>
                                        <div>
                                            <p class="c_name"><%=course.cname%></p>
                                            <p class="c_info"><%=course.introduction%>
                                            </p>
                                        </div>
                                    </li>
                            <%
                                }
                            %>
                            </ul>
                    <%
                        }
                    %>
                    </div>
            </div>
        </div>
        <div class="main-page clearfix">
            <div class="w2">
                <div class="page-content">
                    <span id="next">下一页</span>
                    <ul id="ul">
                        <li>5</li>
                        <li>4</li>
                        <li>3</li>
                        <li>2</li>
                        <li class="current">1</li>

                    </ul>
                    <span id="pre" class="click">上一页</span>
                </div>
            </div>
        </div>
    </div>

    <!--尾部-->
    <div class="bottom">
        <div class="bottom-board">
            <span>丰富的视频资源帮助学生更好地学习</span>
            <span>基于认知负荷的多少推荐课程</span>
            <span>方案多多，适合每一位学生</span>
        </div>
    </div>

    <script src="js/myFunc.js"></script>
    <script>

        var next = $('next');

        next.onclick = function () {
            var ul = $('ul').children;
            var li, index;
            var pre = $('pre');
            pre.className = '';
            for(var i=0; i<ul.length; i++){
                if(ul[i].className === 'current'){
                    li = ul[i];
                    index = i;
                }
            }
            if(index !== 0){
                ul[index-1].className = 'current';
                ul[index].className = '';
            }

            if(index === 1){
                next.className = 'click';
            }
        }

        var pre = $('pre');

        pre.onclick = function () {
            var ul = $('ul').children;
            var li, index;
            var next = $('next');
            next.className = '';
            for(var i=0; i<ul.length; i++){
                if(ul[i].className === 'current'){
                    li = ul[i];
                    index = i;
                }
            }
            if(index !== ul.length-1){
                ul[index+1].className = 'current';
                ul[index].className = '';
            }

            console.log(index);
            if(index === ul.length-2){
                pre.className = 'click';
            }
        }

        var ul = $('ul').children;
        for(var i=0; i<ul.length; i++){
            var li = ul[i];
            li.index = i;
            li.onclick = function () {
                var index, current;
                for(var j=0; j<ul.length; j++){
                    if(ul[j].className === 'current'){
                        index = j;
                        current = ul[j];
                        break;
                    }
                }

                if(this.className!=='current'){
                    this.className = 'current';
                    ul[index].className = '';
                }

                var pre = $('pre'), next = $('next');
                next.className = '';
                pre.className = '';
                if(this.index === ul.length-1){
                    pre.className = 'click';
                }
                else if(this.index === 0){
                    next.className = 'click';
                }
            }
        }
    </script>
</body>
</html>